<template>
<vc-collapse class="nav-collapse" v-model:value="activeMenu">
  <vc-collapse-item 
    v-for="group in data"
    :key="group.name"
    :title="group.name" 
    :value="group.directory"
  >
    <ul>
      <li
        :class="['nav-group-item', {'is-selected': getSelected(item)}]"
        v-for="item in group.children"
        :key="item.path"
        @click="go2path(item)"
      >
        <Nav 
          v-if="item.children" 
          :data="[{
            name: item.name,
            directory: item.directory,
            children: item.children
          }]" 
          :index="index+1"
          @change="val => $emit('change', val)"
        />
        <div class="cell" v-else>
          <p>{{ item.name }}</p>
          <p>{{ item.description }}</p>
        </div>
      </li>
    </ul>
  </vc-collapse-item>
</vc-collapse>
</template>

<script setup lang="ts">
import { defineProps, inject, provide, ref, useContext } from "vue"
import { useRoute } from "vue-router"
import { currentItem } from './data'
import Nav from './index.vue'

const props = defineProps({
  data: Array,
  active: Array,
  index: {
    type: Number,
    default: 1
  }
})

const route = useRoute()
const activeMenu = ref([Object.keys(route.params).length ? route.params.path[props.index] : ''])
const { emit } = useContext()

// 为子级注册事件
provide('navHomeUpdate', updateURL)

const navHome = inject('navHomeUpdate', null);

function updateURL(val) {
  emit('update', val)
}

function go2path(item: any = {}, $props) {
  let url = item.path

  if (!item.children) {

    // 状态切换
    currentItem.value = item

    localStorage.setItem('path', item.path)

    history.pushState(null, item.name, `/src${item.path}`)
    
    navHome ? navHome(item) : updateURL(item)
  }
}

function getSelected(item) {
  let result = false

  if (currentItem.value) {
    result = item.active
  } else {
    if (item.path && route.params.path) {
      let pathArr = item.path.split('/');
      result = pathArr.slice(-1)[0] === route.params.path.slice(-1)[0];
    }
  }

  return result
}
</script>

<style lang="less" scoped>
.nav-collapse {
  :deep(.vc-collapse) {
    &-item {
      &__header {
        padding: 0 5px 0 10px;
      }

      .nav-group-item {
        & > .cell {
          font-size: 14px;
          margin: 0 5px 1px 0;
          padding: 5px;
          border-radius: 5px;
          cursor: pointer;

          p {
            line-height: 1.1;
            color: #555;
          }

          p:nth-child(2) {
            color: #aaa;
            font-size: 12px;
          }

          &:hover {
            background: rgba(0, 0, 0, .1);
            transition: background-color .3s;
          }

        }

        &.is-selected {
          .cell {
            background: #09f;
            color: #fff;

            p:first-child {
              color: rgba(255, 255, 255, 1);
            }
            p:last-child {
              color: rgba(255, 255, 255, .5);
            }
          }
        }

        & > .vc-collapse {
          margin: 0 0 0 10px;
        }
      }

      &__content {
        padding: 0px;

        & > ul {
          padding-left: 15px;
        }
        
        .vc-collapse-item__header {
          padding: 0px 5px 0px 0px;
        }
      }
    }
  }
}
</style>